<script setup>
import { ref } from 'vue';
const props = defineProps({
  secondList: Object,
});
</script>

<template>
  <div
    class="goods-container"
    v-for="item in props.secondList.children"
    :key="item.id"
  >
    <div class="look-all">
      查看全部
      <el-icon class="icon"><ArrowRight /></el-icon>
    </div>
    <div class="goods-main">
      <div class="goods-title">- {{ item.name }} -</div>
      <div class="goods-title-item">温暖柔软，品质之选</div>
      <div class="goods-content">
        <div
          class="goods-content-item"
          v-for="str in item.goods"
          :key="str.id"
        >
          <div class="goods-img-warp">
            <img :src="str.picture" alt="">
          </div>
          <div class="goods-name">{{ str.name }}</div>
          <div class="goods-desc">{{ str.desc }}</div>
          <div class="goods-price">¥{{ str.price }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="good-footer"></div>
</template>

<style scope lang="scss">
@import url('../../assets/style/common.scss');
  .icon {
    vertical-align: middle;
    margin-bottom: 5px;
  }
.goods-container {
  width: 1240px;
  margin: 30px auto;
  background-color: #fff;
  padding: 16px 16px 16px 30px;

  .look-all {
    float: right;
    color: #c3c3c3;

    &:hover {
      color: #5bb79c;
      cursor: pointer;
    }
  }

  .goods-main {
    display: flex;
    flex-direction: column;
    align-items: center;

    .goods-title {
      font-size: 30px;
      color: #666666;
      margin-bottom: 10px;
    }

    .goods-title-item {
      font-size: 24px;
      color: #999999;
      margin-bottom: 10px;
    }

    .goods-content {
      width: 100%;
      display: flex;

      .goods-content-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 220px;
        height: 300px;
        padding: 20px 30px;
        text-align: center;
        justify-content: center;
        transition: all 0.5s;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 0 10px #ccc;
        }

        .goods-img-warp{
          width: 160px;
          height: 160px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .goods-name {
          @include hide(1);
          margin-top: 8px;

        }
        .goods-desc {
          @include hide(1);
          font-size: 14px;
          color: #999999;
          margin: 8px 0;
        }

        .goods-price {
          font-size: 18px;
          color: #bf4e49;
        }
      }
    }
  }
}
.good-footer{
  width: 100%;
  height: 1px;
  background-color: #f5f5f5;
}
</style>
